<template>
  <div style="padding:30px;">
    <el-card class="box-card">
      <el-checkbox-group v-model="checkList">
        <el-checkbox class="item" :style="{display:'block'}" label="请选择查询依据：">
          <div class="flexbox">
            <div style="width: 110px">请选择查询依据：</div>
            <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
              <el-select v-model="select" slot="prepend" placeholder="请选择">
                <el-option label="借出单号" value="1"></el-option>
              </el-select>
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
        </el-checkbox>
        <el-checkbox label="采购时间">
          <div class="flexbox">
            <div style="width: 110px">借出时间：</div>
            <el-date-picker
              v-model="value"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            ></el-date-picker>
          </div>
        </el-checkbox>
      </el-checkbox-group>
    </el-card>

    <el-table :data="tableData" style="width: 100%;margin-top: 50px">
      <el-table-column label="借出单号" width="200">
        <template slot-scope="scope">{{ scope.row.myId }}</template>
      </el-table-column>
      <el-table-column label="物资名称[ 规格 ]" width="250">
        <template slot-scope="scope">{{ scope.row.materialsName }}</template>
      </el-table-column>
      <el-table-column label="借用人" width="200">
        <template slot-scope="scope">{{ scope.row.outPersonnel ? scope.row.outPersonnel : '无' }}</template>
      </el-table-column>
      <el-table-column label="电话" width="200">
        <template slot-scope="scope">{{ scope.row.outPersonnelPhone ? scope.row.outPersonnelPhone : '无' }}</template>
      </el-table-column>
      <el-table-column label="负责人" width="200">
        <template slot-scope="scope">{{ scope.row.principal }}</template>
      </el-table-column>
      <el-table-column label="操作员" width="200">
        <template slot-scope="scope">{{ scope.row.operator }}</template>
      </el-table-column>
      <el-table-column label="借出时间" width="200">
        <template slot-scope="scope">{{ formatDate(scope.row.date) }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
  
<script>
import { getUnreviewedPage, audit } from "@/api/outform"
export default {
  data() {
    return {
      checkList: ["请选择查询依据："],
      input: "",
      select: "",
      value: "",
      tableData: []
    }
  },
  created() {
    this.getUnreviewedPage();
  },
  methods: {
    async getUnreviewedPage() {
      let res = await getUnreviewedPage({ current: "0", size: "100" });
      console.log(res.data.data.items);
      this.tableData = res.data.data.items;
    },

    formatDate (d) {
      var now = new Date(parseFloat(d));
      var year=now.getFullYear();
      var month=now.getMonth()+1;
      var date=now.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (date >= 0 && date <= 9) {
        date = "0" + date;
      }
      var hour=now.getHours();
      var minute=now.getMinutes();
      var second=now.getSeconds();
      if (hour >= 1 && hour <= 9) {
        hour = "0" + hour;
      }
      if (minute >= 0 && minute <= 9) {
        minute = "0" + minute;
      }
      if (second >= 0 && second <= 9) {
        second = "0" + second;
      }
      return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
    },

    async handleEdit(index, row) {
      row.status = '1'
      console.log(index, row);
      let res = await audit(row)
      console.log(res)
      this.getUnreviewedPage()
      this.$message({
        message: '审核成功',
        type: 'success'
      });
    }
  }
}
</script>
  
<style>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.el-select .el-input {
  width: 150px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.flexbox {
  display: flex;
  align-items: center;
  column-gap: 10px;
}
</style>